import React from 'react'
import DemoArea from './components/area'
// import Bubble from './components/bubble'
// import Donut from './components/donut'
// import Line from './components/line'
// import Range from './components/range'
import { Row, Col, Card } from 'antd'
import { InfoCircleOutlined } from '@ant-design/icons'
import './index.css'

const index = () => {
  return (
    <>
      <div>
        <Row>
          <Col span={6}>
            <div>
              <Card>
                <div className="card-header">
                  <span>总物品总数</span>
                  <InfoCircleOutlined className="float-right" />
                </div>
                <div className="big-num">80,846</div>
                <div className="mini-chart">
                  <DemoArea />
                </div>
              </Card>
            </div>
          </Col>
          <Col span={18}>
            <div>
              <Card title="30天移送/告知/借用物品数量" extra={<a href="#">More</a>}></Card>
            </div>
          </Col>
        </Row>
      </div>
      {/* <DemoArea /> */}
      {/* <Donut /> */}
      {/* <Bubble />
      <Bubble />
      <Donut />
      <Line />
      <Range /> */}
    </>
  )
}

export default index
